<extend name="Include:Layout"/>
<block name="title">体验课</block>
<block name="style">
<style>
#lesson_popup header h1{
    font-size: 18px;
    line-height:40px;
    color: #3cc51f;
    font-weight: 400;
    float:left;
    padding-left:15px;
  }
#lesson_popup td{border:solid #ddd; border-width:0px 1px 1px 0px;text-align:center;font-size:14px;line-height:30px;}
#lesson_popup table{border:solid #ddd; border-width:1px 0px 0px 1px;}
#lesson_popup td b{font-size:16px;padding-left:15px;}
  .choice {background-color:#EFEFF4;color:#04BE02;}
 .text-info {color:#999;text-align:center;padding-top:10px;padding-bottom:10px;}
 .enable {color:#999;}
.weui_cells {font-size:14px;}
  .cell_xiaoqu_desc {color:#888; font-size:12px;}
  #tabledata td {font-size:12px;}
  
.toolbar .left-button {
    position: absolute;
    left: 0;
    box-sizing: border-box;
    height: 2.2rem;
    line-height: 2.2rem;
    color: #04BE02;
    z-index: 1;
    padding: 0 .5rem;
}
</style>
</block>

<block name="main">
	<div class="weui_tab">
		<div class="weui_navbar">
	  		<div class="weui_navbar_item weui_bar_item_on" >体验课</div>
	  		<div class="weui_navbar_item " onclick="self.location='{:U('qita',array('t'=>'dy'))}'">陶艺/DIY</div>
	  		<div class="weui_navbar_item " onclick="self.location='{:U('qita',array('t'=>'crb'))}'">成人班</div>
		</div>
		<div class="weui_tab_bd container" id="container">
			<div class="weui_cells" style="background:#fff;margin-top:20px;">
				<div class="weui_cell">
		            <div class="weui_cell_hd"><label class="weui_label">学生姓名</label></div>
		            <div class="weui_cell_bd weui_cell_primary">
		                <input class="weui_input" type="text" name="stuname" id="stuname" value="{$_SESSION[_loginUser_home][realname]}" placeholder="请输入学生姓名">
		            </div>
		        </div>
		        <div class="weui_cell">
				   <div class="weui_cell_hd"><label class="weui_label">出生年月</label></div>
				   <div class="weui_cell_bd weui_cell_primary">
				      <input class="weui_input" type="text" name="birthday" id="birthday" value="" readonly data-toggle='date'/>
				   </div>
				</div>
		        <div class="weui_cell">
		            <div class="weui_cell_hd"><label class="weui_label">手机号码</label></div>
		            <div class="weui_cell_bd weui_cell_primary">
		                <input class="weui_input" type="number" name="mobile" id="mobile" value="{$_SESSION[_loginUser_home][mobile]}" readonly pattern="[0-9]*" placeholder="请输入验证码">
		            </div>
		        </div>
			     <div class="weui_cell">
				    <div class="weui_cell_hd"><label class="weui_label">校区</label></div>
				    <div class="weui_cell_bd weui_cell_primary">
				    	<input class="weui_input" id="xiaoqu" type="text" name="xiaoqu" value=""  placeholder="点击选择校区" readonly data-values="0">
				    </div>
				  </div>
				  <div class="weui_cell banjiDom" style="display:none;">
				    <div class="weui_cell_hd"><label class="weui_label">课程</label></div>
				    <div class="weui_cell_bd weui_cell_primary">
				    	<input class="weui_input" id="banji" type="text" name="banji" readonly value="" data-values="0">
				    </div>
				  </div>
				  
				  <!-- <div class="weui_cell banjiDom" style="display:none;">
				   	<div class="weui_cell_hd"><label class="weui_label">班级</label></div>
				    <div class="weui_cell_bd weui_cell_primary">
				    	<input class="weui_input" id="lesson"  type="text" name="lesson" readonly value="" data-lid="">
				    </div>
				  </div> -->
				  
				  <div class="weui_cell banjiDom" style="display:none;">
				   	<div class="weui_cell_hd"><label class="weui_label">费用</label></div>
				    <div class="weui_cell_bd weui_cell_primary">
				    	<input class="weui_input" id="fee"  type="text" name="fee" readonly value="<if condition='$money'>90.00<else/>0</if>">
				    </div>
				  </div>
		    </div>
		    <div class="weui_btn_area">
		    	<input type="hidden" name="t" value="tiyan"/>
		    	<input type="hidden" name="uid" value="{$uid}"/>
		    	<input type="hidden" name="money" value="{$money}"/>
		        <button class="weui_btn weui_btn_primary btn-tiyanke">确定提交</button>
   		    </div>
		    <p style="color:#999;padding:20px 15px;">
		    	注：每人仅一次免费体验机会，如本人是第二次上体验课则要缴纳单次课时费用90.00元。
		    </p>
		    
		   <div class="weui_btn_area" style="display:none;">
		        <a class="weui_btn weui_btn_warn" href="{:U('baoming/index')}">直接报名</a>
		    </div>
		</div>
	</div>
	
<div id="xiaoqu_popup" class="weui-popup-container">
  <div class="weui-popup-modal" style="background:#fff;">
    <div class="toolbar">
          <div class="toolbar-inner">
            <a href="javascript:;" class="picker-button closebtn">关闭</a>
            <h1 class="title" id="xiaoqu_title">选择校区</h1>
          </div>
    </div>
    <div class="modal-content">
	    <div class="weui_panel weui_panel_access" style="margin-top:0;">
	      <div class="weui_panel_bd"> 
	        <div class="weui_cells weui_cells_radio" id="xiaoqu_data">
			 
			</div>
	      </div>
	    </div>
    </div>
  </div>
</div>
<script id="xiaoqu_data_html" type="text/html">
{{each list as value index}}
<div class="weui_cell weui_check_label xiaoqu_class" onclick="get_xiaoqu('{{value.title}}',{{value.id}})" for="xq{{index}}" data-title="{{value.title}}" data-id="{{value.id}}">
	<div class="weui_cell_bd weui_cell_primary">
		<p><span class="cell_xiaoqu">{{value.title}}</span> <br/><span class="cell_xiaoqu_desc">电话：{{value.tel}}</span><br/><span class="cell_xiaoqu_desc">地址：{{value.address}}</span></p>
	</div>
	<div class="weui_cell_ft">
		{{if did == value.id}}
		<input type="radio" class="weui_check" name="radio_xq" checked="checked"  id="xq{{index}}" >
		{{else}}
		<input type="radio" class="weui_check" name="radio_xq"  id="xq{{index}}" >
		{{/if}}
		<span class="weui_icon_checked"></span>
	</div>
</div>
{{/each}}
</script>

<div id="kecheng_popup" class="weui-popup-container">
  <div class="weui-popup-modal" id="kecheng_data" style="background:#fff;">
    
  </div>
</div>

<script id="banji_data_html" type="text/html">
<div class="toolbar">
	<div class="toolbar-inner">
    	<a href="javascript:;" class="picker-button goxiaoqu">校区</a>
        <h1 class="title" id="banji_title">{{title}}</h1>
    </div>
</div>
    <div class="modal-content">
	    <div class="weui_panel weui_panel_access" style="margin-top:0;">
	      <div class="weui_panel_bd"> 
	        <div class="weui_cells weui_cells_radio" >
			 	{{each list as value index}}
				<div class="weui_cell weui_check_label kecheng_class" onclick="get_kecheng('{{value.title}}',{{value.id}})" for="kc{{index}}"  data-title="{{value.title}}" data-id="{{value.id}}">
 					<div class="weui_cell_bd weui_cell_primary">
						<span class="cell_xiaoqu">{{value.title}}</span> <br/><span class="cell_xiaoqu_desc">{{value.desc}}</span>
					</div>
					<div class="weui_cell_ft">
					{{if cid == value.id}}
					<input type="radio" class="weui_check" name="radio_kc" checked="checked"  id="kc{{index}}" >
					{{else}}
					<input type="radio" class="weui_check" name="radio_kc" id="kc{{index}}">
					{{/if}}
	    			<span class="weui_icon_checked"></span>
				</div>
			</div>
			{{/each}}
			</div>
	      </div>
	    </div>
    </div>

</script>

<div id="lesson_popup" class="weui-popup-container">
  <div class="weui-popup-modal" id="lesson_data" style="background:#fff;">

  </div>
</div>

<script id="lesson_data_html" type="text/html">
    <div class="toolbar">
          <div class="toolbar-inner">
            <a href="javascript:;" class="picker-button gokecheng">课程</a>
            <h1 class="title" id="lesson_title">{{title}}</h1>
          </div>
    </div>
    <div class="modal-content">
	    <div class="weui_panel weui_panel_access" style="margin-top:0;">
	      <div class="weui_panel_bd" style="padding:20px;"> 
	        <table id="tabledata" style="width:100%;" cellpadding="0" cellspacing="0">
	       		<tr>
			      	<td>班级</td>
					<td>对象</td>
					<td>类型</td>
					<td>时间</td>
				</tr>
				{{each list as value index}}
				<tr class="lesson_class {{if lid == value.id}}choice{{/if}}" onclick="get_lesson('{{value.lessoncode}}',{{value.id}})"  data-value="{{value.lessoncode}}" data-lid="{{value.id}}">
					<td>{{value.lessoncode}}</td>
					<td>{{value.tar}}</td>
					<td>{{value.lessontype}}</td>
					<td>{{value.lessontime}}</td>
				</tr>
				{{/each}}
	        </table>
	      </div>
	    </div>
    </div>
	
</script>
</block>

<block name="script">
<script>
$("#birthday").calendar();
$(".closebtn").click(function(){
	$("#total").val('');
	$('.banjiDom').hide();
	$.closePopup();
	
})

$(document).on('click','.goxiaoqu',function(){
	$.closePopup();
	$("#xiaoqu").trigger('click');
})

$(document).on('click','.gokecheng',function(){
	$.closePopup();
	$("#banji").trigger('click');
})

$(document).on('click','.gobanji',function(){
	$.closePopup();
	$("#lesson").trigger('click');
})


$("#xiaoqu").click(function(){
	$.showLoading();
	var did = $(this).attr("data-values");
	if(!did) did = 0;
	$.get('/api/ygcl/getxiaoqu_new',function(ret){
		if(ret.status){
			var data = {
				'did':did,
				'list':ret.data
			}
			var html = template("xiaoqu_data_html", data);
			$("#xiaoqu_data").html(html);
			$.hideLoading();
			$("#xiaoqu_popup").popup();
		}else{
			$.alert('无校区','');
		}
	})
})
function get_xiaoqu(title,id){
	$("#xiaoqu").val(title);
	$("#xiaoqu").attr("data-values",id);
	
	$("#banji").val('');
	$("#banji").attr("data-values",'0');
	$("#lesson").val('');
	$("#lesson").attr("data-values",'0');
	$("#xueqi").val('');
	$("#xueqi").attr("data-values",'0');
	$("#total").val('');
	
	$.closePopup();
	$("#banji").trigger('click');
}

$("#banji").click(function(){
	$.showLoading();
	var cid = $(this).attr("data-values");
	var did = $("#xiaoqu").attr("data-values");
	var title = $("#xiaoqu").val();
	if(!cid) cid = 0;
	$.get('/api/ygcl/getclass_new',{did:did},function(ret){
		if(ret.status){
			var data = {
				'cid':cid,
				'title':title,
				'list':ret.data
			}
			var html = template("banji_data_html", data);
			$("#kecheng_data").html(html);
			$.hideLoading();
			$("#kecheng_popup").popup();
		}else{
			$.alert('无课程信息','')
		}
	})
})

function get_kecheng(title,id){
	$("#banji").val(title);
	$("#banji").attr("data-values",id);
	
	$("#lesson").val('');
	$("#lesson").attr("data-values",'0');
	$("#xueqi").val('');
	$("#xueqi").attr("data-values",'0');
	
	$('.banjiDom').show();
	$.closePopup();
	//$("#lesson").trigger('click');
}

$("#lesson").click(function(){
	var cid = $('#banji').attr('data-values');
	var title = $("#banji").val();
	var lid = $(this).attr('data-values');
	if(!lid) lid=0;
	$.get('/api/ygcl/getlesson_new',{cid:cid},function(ret){
		if(ret.status){
			var data = {
				'lid':lid,
				'title':title,
				'list':ret.data
			}
			var html = template("lesson_data_html", data);
			$("#lesson_data").html(html);
			$.hideLoading();
			$("#lesson_popup").popup();
		}else{
			$.alert('无班级信息','')
		}
	})
})

function get_lesson(title,id){
	$("#lesson").val(title);
	$("#lesson").attr("data-values",id);
	
	$("#xueqi").val('');
	$("#xueqi").attr("data-values",'0');
	
	$('.banjiDom').show();
	$.closePopup();
}



$(".btn-tiyanke").click(function(){
	var thisBtn = $(this);
	if(thisBtn.attr('disabled') == 'disabled') {
        return;
	}
	var birthday=$.trim($("input[name=birthday]").val());
	if(birthday == ''){
		$.alert("请选择出生日期",'');
		return false;
	}
	var xiaoqu =$("#xiaoqu").val();
	if(xiaoqu == ''){
		$.alert("请选择校区","");
		return false;
	}
	var banji =$("#banji").val();
	if(banji == ''){
		$.alert("请选择课程","");
		return false;
	}
	//var lesson =$("#lesson").val();
	//if(lesson == ''){
	//	$.alert("请选择班级","");
	//	return false;
	//}
	thisBtn.attr('disabled', 'disabled');
	var data = {
			uid:$("input[name=uid]").val(),
			stuname:$("#stuname").val(),
			birthday:birthday,
			tel:$("#mobile").val(),
			did:$("#xiaoqu").attr("data-values"),
			xiaoqu:xiaoqu,
			cid:$("#banji").attr("data-values"),
			banji:banji,
			//lid:$("#lesson").attr("data-lid"),
			//lesson:$("#lesson").val(),
			fee:$("#fee").val()
		};
	$.showLoading();
	$.post('/api/ygcl/savetiyan',data,function(data){
		$.hideLoading();
		thisBtn.removeAttr('disabled');
		if(data.status){
			if(data.data){
				location.href="/weixin/pay/index/id/"+data.data+'.html';
			}else{
				$.toast("提交成功",function(){
					location.reload();
				});
			}
		}else{
			$.alert(data.data,'');
		}
	});
})

</script>
</block>